{% extends 'base.html' %}
{% load static %}

{% block title %} - 用户信息{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/usr_info.css' %}">
<style>
/* 紧凑型简约布局 */
#content {
    padding: 2rem 5%; /* 减少顶部和两侧内边距 */
    margin-left: 250px;
    min-height: 100vh; /* 保持视口高度 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #f8fafc;
}

.light-buttons {
    width: 100%;
    max-width: 1000px; /* 缩小最大宽度 */
    padding: 3rem; /* 减少容器内边距 */
    position: relative;
}

/* 顶部装饰条 */
.dashboard-header {
    padding-bottom: 2rem; /* 减少标题底部间距 */
    margin-bottom: 1.5rem; /* 减少标题与内容间距 */
}

.dashboard-header::after {
    width: 60px; /* 缩短装饰条长度 */
    height: 3px; /* 缩小装饰条高度 */
}

.dark-header {
    font-size: 2rem; /* 缩小标题字体 */
    letter-spacing: 0;
}

/* 功能链接样式 */
.function-link {
    padding: 1.2rem 0; /* 减少链接垂直间距 */
    border-bottom-width: 0.8px; /* 细化分隔线 */
}

.function-link-content {
    padding-right: 1.5rem; /* 减少右侧间距 */
}

.function-link span {
    font-size: 1.1rem; /* 缩小主文字体 */
    margin-bottom: 0.3rem; /* 减少文字间距 */
}

.function-link-desc {
    font-size: 0.9rem; /* 缩小描述字体 */
    line-height: 1.4; /* 紧凑行高 */
}

.icon {
    width: 40px; /* 缩小图标尺寸 */
    height: 40px;
    border-radius: 8px; /* 更小圆角 */
}

.arrow {
    width: 20px; /* 缩小箭头尺寸 */
    height: 20px;
}

/* 强制限制容器最大高度 */
@media (min-height: 768px) {
    .light-buttons {
        max-height: calc(100vh - 120px); /* 预留头部和底部空间 */
        overflow-y: auto; /* 超出时显示滚动条（但常规尺寸下不会触发） */
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    #content {
        margin-left: 0;
        padding: 1.5rem 4%;
    }

    .light-buttons {
        padding: 2rem;
        max-width: 100%;
    }

    .dark-header {
        font-size: 1.8rem;
    }
}
</style>
{% endblock %}

{% block userHighlight %}active{% endblock %}

{% block main_block %}
<section id="content">
    <section class="light-buttons">
        <div class="dashboard-header">
            <h1 class="dark-header">个人中心</h1>
        </div>
        <a href="{% url 'Lab:userCentre' %}" class="function-link">
            <div class="function-link-content">
                <span>个人信息管理</span>
                <p class="function-link-desc">查看和修改个人基本信息</p>
            </div>

        </a>
        <a href="{% url 'Lab:borrowHistory' %}" class="function-link">
            <div class="function-link-content">
                <span>药品借阅记录</span>
                <p class="function-link-desc">查询历史药品借阅记录及当前借阅状态</p>
            </div>

        </a>
        <a href="{% url 'Lab:borrowInsHistory' %}" class="function-link">
            <div class="function-link-content">
                <span>仪器使用记录</span>
                <p class="function-link-desc">查看实验仪器借阅历史和使用情况统计</p>
            </div>

        </a>
        <a href="{% url 'Lab:changePassword' %}" class="function-link">
            <div class="function-link-content">
                <span>修改密码</span>
                <p class="function-link-desc">修改登录密码</p>
            </div>

        </a>
    </section>
</section>
{% endblock %}